<template>
  <div class="create">
    <div class="titles">
      <h1>评价期限设置</h1>
      <Button type="primary" @click="handleToAddSetting">添 加</Button>
    </div>
    <div>
      <Table border :columns="columns" :data="ruleListData"></Table>
      <Page
        :total="ruledataCount"
        show-sizer
        show-total
        @on-change="changePageCurrent"
        @on-page-size-change="changePageSize"
        style="display: flex;margin-top: 30px;justify-content: center;align-items：flex-end"
      />
    </div>

    <!-- 编辑弹框 -->
    <Modal
      v-model="submintModa"
      title="编辑"
      @on-ok="handleSave"
      @on-cancel="handleCancel"
    >
      <Row class="RowStyle">
        <i-col span="4" style="">Id</i-col>
        <i-col span="14">{{ Id }}</i-col>
      </Row>
      <Row class="RowStyle">
        <i-col span="4" style="">评价年度</i-col>
        <i-col span="14">{{ formItem.Year }}</i-col>
      </Row>
      <Row class="RowStyle">
        <Col span="4" style="line-height: 30px">评价期限</Col>
        <Col span="20">
          <DatePicker
            :value = formItem.term
            format="yyyy/MM/dd"
            type="daterange"
            placement="bottom-end"
            :placeholder="formItem.term"
            style="width: 280px"
            @on-change="handleToChangeTerm"
          ></DatePicker>
        </Col>
      </Row>
    </Modal>
    <!-- 新增弹框 -->
    <Modal v-model="submintModaADD" title="新增" :footer-hide="false">
      <div slot="footer">
        <Button @click="handleCancelADD">取消</Button>
        <Button type="primary" @click="handleSaveADD">确定</Button>
      </div>
      <Row class="RowStyle">
        <Col span="4" style="line-height: 30px">评价年度</Col>
        <Col span="20">
          <DatePicker
            :value = formItem.Year
            type="year"
            placeholder="评价年度"
            style="width: 280px"
            @on-change="handleToChangeYear"
          ></DatePicker>
        </Col>
      </Row>
      <Row class="RowStyle">
        <Col span="4" style="line-height: 30px">评价期限</Col>
        <Col span="20">
          <DatePicker
            :value = formItem.term
            format="yyyy/MM/dd"
            type="daterange"
            placement="bottom-end"
            placeholder="开始日期 - 结束日期"
            style="width: 280px"
            @on-change="handleToChangeTerm"
          ></DatePicker>
        </Col>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      Id: 0, //存储ID
      classlyName: "", //分类名
      submintModa: false, //编辑弹框显示
      submintModaADD: false,
      columns: [
        {
          title: "序号",
          type: "index",
          width: 100,
          align: "center",
        },
        {
          title: "评价年度",
          key: "Year",
          align: "center",
          width: 250,
        },
        {
          title: "评价期限",
          key: "term",
          align: "center",
        },
        {
          title: "操作",
          key: "edit",
          align: "center",
          width: 280,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "10px",
                  },
                  on: {
                    click: () => {
                      this.edit(params);
                    },
                  },
                },
                "期限修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small",
                  },
                  on: {
                    click: () => {
                      // this.remove(params);
                    },
                  },
                },
                "开始评估核算"
              ),
            ]);
          },
        },
      ],
      ListData: [{}], //获取列表信息
      classlyNameObject: {},
      formItem: {
        Year: "0",
        term: "",
      },
    };
  },
  computed: {
    ruledataCount(){
      return this.$store.state.rule.dataCount;
    },
    ruleListData() {
      return this.$store.state.rule.ListData;
    },
    dataCount() {
      return this.$store.state.login.user;
    },
  },
  
  methods: {
    ...mapMutations(["setRule"]),
    ...mapActions(["addRuleData","getRuleListData","editRuleData"]),
    // 新增
    handleToAddSetting() {
      this.submintModaADD = true;
      this.formItem.Year = "0";
      this.formItem.term = "";
    },
    handleSaveADD() {
      if (this.formItem.Year == 0) {
        this.$Message.warning("请选择评价年度");
        return;
      } else if (this.formItem.term == "") {
        this.$Message.warning("请选择评价期限");
        return;
      } else {
        this.addRuleData(this.formItem).then(res=>{
          console.log(res)
          if(res.code === 2000){
            this.submintModaADD = false;
            this.$Message.success(res.msg);
            this.getRuleListData();
          }else if(res.code === 3003){
            this.$Message.warning(res.msg);
          }
        })
      }
    },
    handleCancelADD() {
      this.submintModaADD = false;
      this.$Message.info("取消");
    },
    handleToChangeYear(event) {
      this.formItem.Year = event;
    },
    handleToChangeTerm(event) {
      console.log(event);
      this.formItem.term = event[0] + " - " + event[1];
    },
    //显示编辑
    edit(event) {
      console.log(event)
      this.submintModa = true;
      this.Id = event.row.id;
      this.formItem.Year = event.row.Year;
      this.formItem.term = event.row.term;
    },
    handleCancel() {
      this.$Message.info("取消");
    },
    handleSave() {
      //通过接口保存数据 ----> name
      this.editRuleData({
        id:this.Id,
        Year:this.formItem,
        term:this.formItem.term
      }).then(res=>{
        console.log(res)
          if(res.code === 2000){
            this.submintModa = false;
            this.$Message.success(res.msg);
            this.getRuleListData();
          }else if(res.code === 3003){
            this.$Message.warning(res.msg);
          }
      })

    },
    //删除
    async remove(event) {
      console.log(event)
      this.$Modal.confirm({
        title: "是否删除？",
        onOk: () => {
          
        },
        onCancel: () => {
          this.$Message.info("取消");
        },
      });
    },
    
    // 翻页
    changePageCurrent(event){
      this.setRule({
        pageCurrent:event
      })
      this.getRuleListData()
    },
    changePageSize(event){
      this.setRule({
        pageSize:event
      })
      this.getRuleListData()
    }
  },
  created() {
    this.getRuleListData()
  },
};
</script>

<style scoped lang="less">
.create {
  margin: 20px 0 0 30px;
  .titles {
    display: flex;
    justify-content: space-between;
  }
}
.RowStyle {
  margin: 20px;
}
</style>